<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<title>User</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/firstdemo/CSS/w3.css">
<link rel="stylesheet" href="/firstdemo/CSS/google.css">
<link rel="stylesheet" href="/firstdemo/fontawesome/css/all.css">
<style>
    html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
</style>

<body class="w3-light-grey">

<!-- Top container -->
<div class="w3-bar w3-top w3-teal w3-large" style="z-index:4">
    <button class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey" onclick="w3_open();"><i class="fa fa-bars"></i>  Menu</button>
    <span class="w3-bar-item w3-right">Logo</span>
</div>

<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"><br>
    <div class="w3-container w3-row">
        <div class="w3-col s4">
            <img src="/firstdemo/images/avatar2.png" class="w3-circle w3-margin-right" style="width:46px">
        </div>
        <div class="w3-col s8 w3-bar">
            <span>Welcome, <strong><%=request.getAttribute("username")%></strong></span><br>
            <a  class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a>
            <a  class="w3-bar-item w3-button"><i class="fa fa-user"></i></a>
            <a  class="w3-bar-item w3-button"><i class="fa fa-cog"></i></a>
        </div>
    </div>
    <hr>
    <div class="w3-container">
        <h5>Dashboard</h5>
    </div>
    <div class="w3-bar-block">
        <a  class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="w3_close()" title="close menu"><i class="fa fa-remove fa-fw"></i>  Close Menu</a>
        <a  class="w3-bar-item w3-button w3-padding" id="briefbar"><i class="fa fa-users fa-fw"></i>
              <botton id = "brief">简要</botton></a>
        <a  class="w3-bar-item w3-button w3-padding" id="postbar"><i class="fa fa-eye fa-fw"></i>
              <botton id = "post">公告</botton></a>
        <a  class="w3-bar-item w3-button w3-padding" id="processbar"><i class="fa fa-users fa-fw"></i>
              <botton id = "process">进度</botton></a>
        <a  class="w3-bar-item w3-button w3-padding" id="gradebar"><i class="fa fa-bullseye fa-fw"></i>
              <botton id = "grade">成绩</botton></a>
        <a  class="w3-bar-item w3-button w3-padding" id="friendbar"><i class="far fa-gem"></i>
              <botton id = "friend">好友</botton></a>
        <a  class="w3-bar-item w3-button w3-padding" id="commentbar"><i class="fa fa-bell fa-fw"></i>
              <botton id = "comment">留言</botton></a>
        <a  class="w3-bar-item w3-button w3-padding" id="pagelistbar"><i class="fas fa-university"></i>
              <botton id = "pagelist">Page List</botton>General</a>
        <a  class="w3-bar-item w3-button w3-padding" id="historybar" href="BacktoLogin" ><i class="fa fa-history fa-fw"></i>
              退出用户</a>
        <a  class="w3-bar-item w3-button w3-padding" id="infobar"><i class="fa fa-cog fa-fw"></i>
              <botton id = "info">课件下载</botton></a><br><br>
    </div>
</nav>


<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>

<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px;margin-top:43px;">

    <!-- Header -->
    <header class="w3-container" style="padding-top:22px">
        <h5><b><i class="fa fa-dashboard"></i> My Dashboard</b></h5>
    </header>
    <!-- $# brief view -->
    <div id = "alter1" class="w3-row-padding w3-margin-bottom" >
        <div class="w3-quarter">
            <div class="w3-container w3-red w3-padding-16">
                <div class="w3-left"><i class="fa fa-comment w3-xxxlarge"></i></div>
                <div class="w3-right">
                    <h3>52</h3>
                </div>
                <div class="w3-clear"></div>
                <h4>Messages</h4>
            </div>
        </div>
        <div class="w3-quarter">
            <div class="w3-container w3-blue w3-padding-16">
                <div class="w3-left"><i class="fa fa-eye w3-xxxlarge"></i></div>
                <div class="w3-right">
                    <h3>99</h3>
                </div>
                <div class="w3-clear"></div>
                <h4>Views</h4>
            </div>
        </div>
        <div class="w3-quarter">
            <div class="w3-container w3-teal w3-padding-16">
                <div class="w3-left"><i class="fa fa-share-alt w3-xxxlarge"></i></div>
                <div class="w3-right">
                    <h3>23</h3>
                </div>
                <div class="w3-clear"></div>
                <h4>Shares</h4>
            </div>
        </div>
        <div class="w3-quarter">
            <div class="w3-container w3-orange w3-text-white w3-padding-16">
                <div class="w3-left"><i class="fa fa-users w3-xxxlarge"></i></div>
                <div class="w3-right">
                    <h3>50</h3>
                </div>
                <div class="w3-clear"></div>
                <h4>Users</h4>
            </div>
        </div>
    </div>
    <!-- $# post list -->
    <div id = "alter2" class="w3-panel" display = "none">
        <div id = "alter21" class="w3-margin-bottom" >
            <div class="w3-bar w3-row-padding w3-xxlarge" >
                <form action="GetPoster" method="post" target="_blank">
                    <div class="w3-quarter"  data-tilt>
                        <div class="w3-container w3-red" >
                            <input  name="username" value="${username}" style="display: none">
                            <input class=" w3-input w3-red w3-text-white " type="submit" value="查看公告" style="height: 150px">
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
    <hr>
    <!-- $# processing bar -->
    <div id = "alter3" class="w3-container">
        <h5>General Stats</h5>
        <p>New Visitors</p>
        <div class="w3-grey">
            <div class="w3-container w3-center w3-padding w3-green" style="width:25%">+25%</div>
        </div>

        <p>New Users</p>
        <div class="w3-grey">
            <div class="w3-container w3-center w3-padding w3-orange" style="width:50%">50%</div>
        </div>

        <p>Bounce Rate</p>
        <div class="w3-grey">
            <div class="w3-container w3-center w3-padding w3-red" style="width:75%">75%</div>
        </div>
    </div>
    <hr>
    <!-- $# grade -->
    <div id = "alter4" class="w3-container">
        <div id = "alter41" class="w3-margin-bottom" >
            <div class="w3-bar w3-row-padding w3-xxlarge" >
                <form action="SearchGrade" method="post" target="_blank">
                    <div class="w3-quarter"  data-tilt>
                        <div class="w3-container w3-deep-purple" >
                            <input  name="username" value="${username}" style="display: none">
                            <input class=" w3-input w3-deep-purple w3-text-white " type="submit" value="查询成绩" style="height: 150px">
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
    <hr>
    <!-- $# user lists friend -->
    <div id = "alter5" class="w3-container">
        <div id = "alter51" class="w3-margin-bottom" >
            <div class="w3-bar w3-row-padding w3-xxlarge" >
                <form action="SelectUser" method="post" target="_blank">
                    <div class="w3-quarter"  data-tilt>
                        <div class="w3-container w3-red" >
                            <input  name="username" value="${username}" style="display: none">
                            <input class=" w3-input w3-red w3-text-white " type="submit" value="查询用户" style="height: 150px">
                        </div>
                    </div>
                </form>
                <form action="FriendList" method="post" target="_blank">
                    <div class="w3-quarter" data-tilt>
                        <div class="w3-container w3-blue" >
                            <input type="hidden" name="username" value=${username} >
                            <input class=" w3-input w3-blue w3-text-white " type="submit" value="查询好友列表" style="height: 150px">
                        </div>
                    </div>
                </form>
                <form action="FriendRequest" method="post"  target="_blank">
                    <div class="w3-quarter" data-tilt>
                        <div class="w3-container w3-orange" >
                            <input type="hidden" name="username" value=${username} >
                            <input type="hidden" name="pwd" value=${pwd} >
                            <input class=" w3-input w3-orange w3-text-white " type="submit" value="好友添加消息" style="height: 150px">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <hr>
    <!-- $# recent comments -->
    <div id = "alter6" class="w3-container">

        <div class="w3-row-padding">
            <form action="GetMessage" method="post" target="_blank">
                <div class="w3-quarter"  data-tilt>
                    <div class="w3-container w3-blue w3-padding-16" style="height: 150px">
                        <div class="w3-right"><i class="fa fa-eye w3-xxxlarge"></i></div>
                        <div class="w3-left">
                            <input class="w3-input w3-blue w3-xxlarge" type="submit" value="查看Ta的留言">
                        </div>
                        <div class="w3-clear"></div>
                        <input class="w3-input w3-text" name="receivername" type="text">
                        <input type="hidden" name="username" value=${username} >
                    </div>
                </div>
            </form>
        </div>
        <h5>新增留言</h5>
        <div class="w3-row-padding">
            <form action="AddMessage" method="post" target="_blank">
            <div class="w3-quarter" data-tilt>
                <div class="w3-container w3-red w3-padding-16" style="height: 150px">
                    <div class="w3-right"><i class="fa fa-male w3-xxxlarge"></i></div>
                    <div class="w3-left">
                        <h3>留言对象</h3>
                    </div>
                    <div class="w3-clear"></div>
                    <input  name="username" value="${username}" style="display: none">
                    <input class="w3-input w3-text" name="receivername" type="text" >
                </div>
            </div>
            <div class="w3-quarter" data-tilt>
                <div class="w3-container w3-deep-purple w3-padding-16" style="height: 150px">
                    <div class="w3-right"><i class="fa fa-envelope w3-xxxlarge"></i></div>
                    <div class="w3-left">
                        <h3>留言信息</h3>
                    </div>
                    <div class="w3-clear"></div>
                    <input class="w3-input w3-text" name="string" type="text" >
                </div>
            </div>
            <div class="w3-quarter" data-tilt>
                <div class="w3-container w3-orange w3-padding-16" style="height: 150px">
                    <input class=" w3-input w3-orange w3-text-white w3-xxxlarge" type="submit" value="确认留言" >
                </div>
            </div>
            </form>
        </div>

<%--        <div class="w3-row">--%>
<%--            <div class="w3-col m2 text-center">--%>
<%--                <img class="w3-circle" src="/firstdemo/images/avatar3.png" style="width:96px;height:96px">--%>
<%--            </div>--%>
<%--            <div class="w3-col m10 w3-container">--%>
<%--                <h4>John <span class="w3-opacity w3-medium">Sep 29, 2014, 9:12 PM</span></h4>--%>
<%--                <p>Keep up the GREAT work! I am cheering for you!! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><br>--%>
<%--            </div>--%>
<%--        </div>--%>

<%--        <div class="w3-row">--%>
<%--            <div class="w3-col m2 text-center">--%>
<%--                <img class="w3-circle" src="/firstdemo/images/avatar1.png" style="width:96px;height:96px">--%>
<%--            </div>--%>
<%--            <div class="w3-col m10 w3-container">--%>
<%--                <h4>Bo <span class="w3-opacity w3-medium">Sep 28, 2014, 10:15 PM</span></h4>--%>
<%--                <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><br>--%>
<%--            </div>--%>
<%--        </div>--%>
    </div>
    <br>

    <!-- $# show page list -->
    <div id = "alter7" class="w3-container w3-padding-32">
        <div id = "alter71" class="w3-margin-bottom" >
            <div class="w3-bar w3-row-padding w3-xxlarge" >
                <form action="AllFile" method="post" target="_blank">
                    <div class="w3-quarter"  data-tilt>
                        <div class="w3-container w3-red" >
                            <input  name="username" value="${username}" style="display: none">
                            <input class=" w3-input w3-red w3-text-white " type="submit" value="下载课件" style="height: 150px">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- $# show page list -->
    <div id = "alter8" class="w3-container w3-dark-grey w3-padding-32">
        <div class="w3-row">
            <div class="w3-container w3-third">
                <h5 class="w3-bottombar w3-border-green">Demographic</h5>
                <p>Language</p>
                <p>Country</p>
                <p>City</p>
            </div>
            <div class="w3-container w3-third">
                <h5 class="w3-bottombar w3-border-red">System</h5>
                <p>Browser</p>
                <p>OS</p>
                <p>More</p>
            </div>
            <div class="w3-container w3-third">
                <h5 class="w3-bottombar w3-border-orange">Target</h5>
                <p>Users</p>
                <p>Active</p>
                <p>Geo</p>
                <p>Interests</p>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="w3-container w3-padding-16 w3-light-grey">
        <h4>FOOTER</h4>
        <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css + BUAA</a></p>
    </footer>

    <!-- End page content -->
</div>

<%--        <h5>Countries</h5>--%>
<%--        <table class="w3-table w3-striped w3-bordeed w3-border w3-hoverable w3-white">--%>
<%--            <tr>--%>
<%--                <td>United States</td>--%>
<%--                <td>65%</td>--%>
<%--            </tr>--%>
<%--            <tr>--%>
<%--                <td>UK</td>--%>
<%--                <td>15.7%</td>--%>
<%--            </tr>--%>
<%--            <tr>--%>
<%--                <td>Russia</td>--%>
<%--                <td>5.6%</td>--%>
<%--            </tr>--%>
<%--            <tr>--%>
<%--                <td>Spain</td>--%>
<%--                <td>2.1%</td>--%>
<%--            </tr>--%>
<%--            <tr>--%>
<%--                <td>India</td>--%>
<%--                <td>1.9%</td>--%>
<%--            </tr>--%>
<%--            <tr>--%>
<%--                <td>France</td>--%>
<%--                <td>1.5%</td>--%>
<%--            </tr>--%>
<%--        </table><br>--%>
<%--        <button class="w3-button w3-dark-grey">More Countries  <i class="fa fa-arrow-right"></i></button>--%>
<%--    --%>

<script>
    // Get the Sidebar
    var mySidebar = document.getElementById("mySidebar");

    // Get the DIV with overlay effect
    var overlayBg = document.getElementById("myOverlay");

    // Toggle between showing and hiding the sidebar, and add overlay effect
    function w3_open() {
        if (mySidebar.style.display === 'block') {
            mySidebar.style.display = 'none';
            overlayBg.style.display = "none";
        } else {
            mySidebar.style.display = 'block';
            overlayBg.style.display = "block";
        }
    }

    // Close the sidebar with the close button
    function w3_close() {
        mySidebar.style.display = "none";
        overlayBg.style.display = "none";
    }

    //
    var b1 = document.getElementById("brief");
    var b2 = document.getElementById("post");
    var b3 = document.getElementById("process");
    var b4 = document.getElementById("grade");
    var b5 = document.getElementById("friend");
    var b6 = document.getElementById("comment");
    var b7 = document.getElementById("info");
    //
    function display(id){
        var traget=document.getElementById(id);
        if(traget.style.display==="none"){
            traget.style.display="block";
        }else{
            ;
        }
    }

    function hide(id){
        var traget=document.getElementById(id);
        if(traget.style.display==="none"){
            ;
        }else{
            traget.style.display="none";
        }
    }

    function activebar(id){
        var obj = document.getElementById(id);
        obj.className += ' w3-blue';
    }

    function negtivebar(id){
        var obj = document.getElementById(id);
        obj.className = "w3-bar-item w3-button w3-padding";
    }

    window.onload = function (){
        display("alter1");
        hide("alter2");
        hide("alter3");
        hide("alter4");
        hide("alter5");
        hide("alter6");
        hide("alter7");
        activebar("briefbar");
    }
    b1.onclick = function (){
        display("alter1");
        hide("alter2");
        hide("alter3");
        hide("alter4");
        hide("alter5");
        hide("alter6");
        hide("alter7");
        activebar("briefbar");
        negtivebar("postbar");
        negtivebar("processbar");
        negtivebar("gradebar");
        negtivebar("friendbar");
        negtivebar("commentbar");
        negtivebar("infobar");
    }
    b2.onclick = function (){
        display("alter2");
        hide("alter1");
        hide("alter3");
        hide("alter4");
        hide("alter5");
        hide("alter6");
        hide("alter7");
        negtivebar("briefbar");
        activebar("postbar");
        negtivebar("processbar");
        negtivebar("gradebar");
        negtivebar("friendbar");
        negtivebar("commentbar");
        negtivebar("infobar");
    }
    b3.onclick = function (){
        display("alter3");
        hide("alter1");
        hide("alter2");
        hide("alter4");
        hide("alter5");
        hide("alter6");
        hide("alter7");
        negtivebar("briefbar");
        negtivebar("postbar");
        activebar("processbar");
        negtivebar("gradebar");
        negtivebar("friendbar");
        negtivebar("commentbar");
        negtivebar("infobar");
    }
    b4.onclick = function (){
        display("alter4");
        hide("alter1");
        hide("alter2");
        hide("alter3");
        hide("alter5");
        hide("alter6");
        hide("alter7");
        negtivebar("briefbar");
        negtivebar("postbar");
        negtivebar("processbar");
        activebar("gradebar");
        negtivebar("friendbar");
        negtivebar("commentbar");
        negtivebar("infobar");
    }
    b5.onclick = function (){
        display("alter5");
        hide("alter1");
        hide("alter2");
        hide("alter3");
        hide("alter4");
        hide("alter6");
        hide("alter7");
        negtivebar("briefbar");
        negtivebar("postbar");
        negtivebar("processbar");
        negtivebar("gradebar");
        activebar("friendbar");
        negtivebar("commentbar");
        negtivebar("infobar");
    }
    b6.onclick = function (){
        display("alter6");
        hide("alter1");
        hide("alter2");
        hide("alter3");
        hide("alter4");
        hide("alter5");
        hide("alter7");
        negtivebar("briefbar");
        negtivebar("postbar");
        negtivebar("processbar");
        negtivebar("gradebar");
        negtivebar("friendbar");
        activebar("commentbar");
        negtivebar("infobar");
    }
    b7.onclick = function (){
        display("alter7");
        hide("alter1");
        hide("alter2");
        hide("alter3");
        hide("alter4");
        hide("alter5");
        hide("alter6");
        negtivebar("briefbar");
        negtivebar("postbar");
        negtivebar("processbar");
        negtivebar("gradebar");
        negtivebar("friendbar");
        negtivebar("commentbar");
        activebar("infobar");
    }
</script>
<script type="text/javascript" src="/firstdemo/JS/vanilla-tilt.js"></script>
</body>
</html>